<template>
	<view class="container">
		<!-- 头部 -->
		<!-- 主横幅区域 -->
		<view class="hero-section">
			<view class="hero-background">
				<image class="hero-bg-image" src="https://picsum.photos/id/20/800/400" mode="aspectFill"></image>
			</view>
			<view class="hero-content">
				<text class="hero-title">专业一对一</text>
				<text class="hero-title">家教辅导服务</text>
				<text class="hero-description">为中小学学生提供个性化辅导，帮助提升成绩，培养学习兴趣</text>
			</view>

			<view class="wave-svg-container">
				<view class="wave-svg">
					<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 100" preserveAspectRatio="none">
						<path fill="#F5F7FA" fill-opacity="1"
							d="M0,64L48,69.3C96,75,192,85,288,80C384,75,480,53,576,53.3C672,53,768,75,864,74.7C960,75,1056,53,1152,48C1248,43,1344,53,1392,58.7L1440,64L1440,100L1392,100C1344,100,1248,100,1152,100C1056,100,960,100,864,100C768,100,672,100,576,100C480,100,384,100,288,100C192,100,96,100,48,100L0,100Z">
						</path>
					</svg>
				</view>
			</view>

			<!-- 我的记录快捷入口 - 精致设计 -->
			<view class="quick-access-section">
				<!-- 投递简历卡片 -->
				<view class="quick-card delivery-card" @click="navigateToMyDelivery">
					<!-- 背景装饰层 -->
					<view class="card-bg-layer">
						<view class="bg-circle circle-1"></view>
						<view class="bg-circle circle-2"></view>
						<view class="bg-pattern"></view>
					</view>

					<!-- 内容层 -->
					<view class="card-main">
						<view class="card-right">
							<text class="card-title">我投递的简历</text>
							<text class="card-desc">查看投递状态 · 追踪进度</text>
						</view>
						<view class="card-arrow-box">
							<text class="arrow-icon">›</text>
						</view>
					</view>
				</view>

				<!-- 发布家教卡片 -->
				<view class="quick-card publish-card" @click="navigateToMyPublish">
					<!-- 背景装饰层 -->
					<view class="card-bg-layer">
						<view class="bg-circle circle-1"></view>
						<view class="bg-circle circle-2"></view>
						<view class="bg-pattern"></view>
					</view>

					<!-- 内容层 -->
					<view class="card-main">
						<view class="card-right">
							<text class="card-title">我发布的家教</text>
							<text class="card-desc">管理需求 · 查看应聘</text>
						</view>
						<view class="card-arrow-box">
							<text class="arrow-icon">›</text>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 内容区域 -->
		<view class="content">
			<!-- 主要功能卡片 -->
			<view class="action-cards">
				<view class="action-card find-tutor-card" @click="navigateToFindTutor">
					<view class="card-content">
						<view class="card-icon">
							<text class="icon-emoji">🔍</text>
						</view>
						<view class="card-info">
							<text class="card-title">我要找家教</text>
							<text class="card-subtitle">发布需求，快速匹配优质老师</text>
						</view>
						<!-- <view class="card-arrow">
               <text class="arrow-icon">→</text>
             </view> -->
					</view>
					<view class="card-decoration">
						<view class="decoration-circle circle-1"></view>
						<view class="decoration-circle circle-2"></view>
					</view>
				</view>

				<view class="action-card be-tutor-card" @click="navigateToBeTutor">
					<view class="card-content">
						<view class="card-icon">
							<text class="icon-emoji">👨‍🏫</text>
						</view>
						<view class="card-info">
							<text class="card-title">我要当家教</text>
							<text class="card-subtitle">注册成为老师，开启教学之路</text>
						</view>
						<!-- <view class="card-arrow">
               <text class="arrow-icon">→</text>
             </view> -->
					</view>
					<view class="card-decoration">
						<view class="decoration-circle circle-1"></view>
						<view class="decoration-circle circle-2"></view>
					</view>
				</view>
			</view>

			<!-- 服务分类 -->
			<view class="category-grid">
				<view class="category-item" v-for="(category, index) in categories" :key="index"
					:style="{ backgroundColor: category.bgColor }" @click="navigateToCategory(category)">
					<view class="category-icon">
						<text class="category-emoji">{{ category.icon }}</text>
					</view>
					<text class="category-name">{{ category.name }}</text>
				</view>
			</view>

			<!-- 推荐老师 -->
			<view class="section-title">
				<view class="title-with-accent">
					<view class="title-accent"></view>
					<text class="title-text">推荐老师</text>
				</view>
				<view class="more-link" @click="navigateToTeachers">
					<text class="more-text">查看更多</text>
					<text class="iconfont-v2 icon-jiantouyou" color="#ff6b35"></text>
				</view>
			</view>

			<scroll-view class="teacher-list" scroll-x>
				<view class="teacher-card" v-for="(teacher, index) in teachers" :key="index"
					@click="navigateToTeacherDetail(teacher)">
					<view class="teacher-img">
						<!-- <text class="teacher-placeholder">{{ teacher.name }}照片</text> -->
						<image class="img-box" :src="teacher.teacherAvatar" mode="aspectFill"></image>
					</view>
					<view class="teacher-info">
						<text class="teacher-name">{{ teacher.name || "李老师" }}</text>
						<text class="teacher-subject">{{ teacher.teachingSubjects }} | {{ teacher.school }}</text>
						<text class="teacher-desc">{{ teacher.selfEvaluation }}</text>
					</view>
				</view>
			</scroll-view>
			<EmptyState 
				v-if="teacherList.length == 0"
				type="default"
				title="暂无老师"
				description="当前没有符合条件的老师"
				:show-button="false"
				button-text="刷新试试"
				@button-click="refreshTeachers"
			/>
					
			<!-- 热门需求 -->
			<view class="section-title">
				<view class="title-with-accent">
					<view class="title-accent"></view>
					<text class="title-text">热门家教需求</text>
				</view>
				<view class="more-link" @click="navigateToPublish">
					<text class="more-text">查看更多</text>
					<text class="iconfont-v2 icon-jiantouyou"></text>
				</view>
			</view>

			<view class="needs-list" v-if="needs.length > 0">
				<view class="need-item" v-for="(need, index) in needs" :key="index" @click="navigateToNeedDetail(need)">
					<view class="need-info">
						<text class="need-subject">{{ need.subjectCourse }} {{need.subjectCourse}}</text>
						<text class="need-desc">{{ need.regionDistrict }} ，{{need.studentSituation}}，{{need.teacherRequirements}}，{{need.classTimeArrangement}}</text>
					</view>
					<text class="need-price">{{ need.salary }}</text>
				</view>
				<view class='loadingicon acea-row row-center-wrapper'>
					<text class='loading iconfont icon-jiazai'
						:hidden='isloading==false'></text>{{needs.length > 0?loadTitle:''}}
				</view>
			</view>

			<EmptyState 
				v-if="needs.length == 0"
				type="default"
				title="暂无需求"
				description="当前没有符合条件的需求"
				:show-button="false"
				button-text="刷新试试"
				@button-click="refreshNeeds"
			/>

		</view>
	</view>
</template>

<script>
	/**
	 * 家教首页
	 * 展示家教服务的主要功能和内容
	 */
	import * as api from '@/api/family'
	import EmptyState from '@/components/common/EmptyState.vue'

	export default {
		name: "JiajiaoIndexPage",
		components: {
			EmptyState
		},
		data() {
			return {
				currentNavIndex: 0,
				currentTabIndex: 0,
				isloading:false,
				loadTitle:'加载更多',
				loadend: false,
				thisForm: {
					page: 1,
					limit: 15,
					status: 'all',
					ordersn: '',
					itemType: 'all',
					is_sign: 0
				},
				thisFormTeacher: {
					page: 1,
					limit: 15,
					status: 'all',
					ordersn: '',
					itemType: 'all',
					is_sign: 0
				},
				categories: [],
				teachers: [],
				teacherList: [],
				needs: [],
				bottomTabs: [{
						name: "首页",
						icon: "🏠"
					},
					{
						name: "消息",
						icon: "💬"
					},
					{
						name: "订单",
						icon: "📄"
					},
					{
						name: "我的",
						icon: "👤"
					},
				],
			};
		},
		onLoad() {
			this.loadMockData();
		},
		onShow() {
			this.getList()
			this.getTeachers()
		},
		onReachBottom() {
			uni.showLoading({
				title: '正在加载',
				mask: true
			});
			this.getList();
		},
		methods: {
			getTeachers(){
				api.getHotTeachersApi(this.thisFormTeacher).then(res=>{
					let list = res.data.list;
					
					for(let i = 0 ;i< list.length;i++){
						let tem = ''
						for(let j = 0;j<list[i].sub.length;j++){
							if(list[i].sub.length == 1){
								tem = list[i].sub[j]
							}else{
								tem = tem + '、' + list[i].sub[j]
							}
							
							
						}
						list[i].teachingSubjects= tem
						
					}
					
					this.teachers = (list);
					this.teacherList = (list);
					
				})
			},
			getList() {
				let that = this;
				let list = [];
				if(that.loadend){
					uni.hideLoading();
					return
				} 
				that.isloading = true;
				api.getHotOrderApi(this.thisForm).then(res => {
					list = res.data.list;
					let loadend = res.data.totalPage <= that.thisForm.page;
					if (list.length > 0) {
						that.needs = that.needs.concat(list);
						that.thisForm.page++;
					}
					
					that.isloading = false;
					that.loadend = loadend
					that.loadTitle = loadend ? "已加载完" : "加载更多";
					uni.hideLoading();
				}).catch(res => {
					uni.showToast({
						title: res,
						icon: 'none',
					});
					uni.hideLoading();
					that.isloading = false;
					that.loadTitle = "加载更多";
				})
			},
			/**
			 * 加载Mock数据
			 * 从本地JSON文件加载模拟数据
			 */
			loadMockData() {
				api.getFamilyIndexApi().then(res=>{
					this.categories = res.data || []
				})
				uni.request({
					url: "/static/data/jiajiao.json",
					success: (res) => {
						if (res.statusCode === 200 && res.data) {
							// this.teachers = res.data.teachers || [];
							// this.needs = res.data.needs || [];
						}
					},
					fail: (err) => {
						console.error("加载Mock数据失败:", err);
						uni.showToast({
							title: "数据加载失败",
							icon: "none",
						});
					},
				});
			},
			/**
			 * 切换导航
			 * @param {number} index - 导航索引
			 */
			switchNav(index) {
				this.currentNavIndex = index;
			},

			/**
			 * 切换底部标签
			 * @param {number} index - 标签索引
			 */
			switchTab(index) {
				this.currentTabIndex = index;
			},

			/**
			 * 导航到登录页面
			 */
			navigateToLogin() {
				uni.navigateTo({
					url: "/pages/user/login",
				});
			},

			/**
			 * 导航到注册页面
			 */
			navigateToRegister() {
				uni.navigateTo({
					url: "/pages/user/register",
				});
			},

			/**
			 * 导航到搜索页面
			 */
			navigateToSearch() {
				uni.navigateTo({
					url: "/pages/jiajiao/search",
				});
			},

			/**
			 * 导航到轮播图详情
			 */
			navigateToBanner() {
				uni.showToast({
					title: "查看轮播图详情",
					icon: "none",
				});
			},

			/**
			 * 导航到分类页面
			 * @param {Object} category - 分类信息
			 */
			navigateToCategory(category) {
				if (category.type === "more") {
					uni.showToast({
						title: "更多分类",
						icon: "none",
					});
				} else {
					uni.navigateTo({
						url: `/pages/jiajiao/teacher?type=${category.type}`,
					});
				}
			},

			/**
			 * 导航到老师列表
			 */
			navigateToTeachers() {
				uni.navigateTo({
					url: "/pages/jiajiao/teacher",
				});
			},

			/**
			 * 导航到老师详情
			 * @param {Object} teacher - 老师信息
			 */
			navigateToTeacherDetail(teacher) {
				uni.navigateTo({
					url: `/pages/jiajiao/teacher-detail?id=${teacher.id}`,
				});
			},

			/**
			 * 导航到发布需求页面
			 */
			navigateToPublish() {
				uni.navigateTo({
					url: "/pages/jiajiao/student",
				});
			},

			/**
			 * 导航到需求详情
			 * @param {Object} need - 需求信息
			 */
			navigateToNeedDetail(need) {
				uni.navigateTo({
					url: `/pages/jiajiao/student-detail?id=${need.id}`,
				});
			},

			/**
			 * 导航到找家教页面
			 */
			navigateToFindTutor() {
				uni.navigateTo({
					url: "/pages/jiajiao/student_order",
				});
			},

			/**
			 * 导航到当家教页面
			 */
			navigateToBeTutor() {
				uni.navigateTo({
					url: "/pages/jiajiao/teacher_order",
				});
			},

			/**
			 * 导航到预约页面
			 */
			navigateToBooking() {
				uni.navigateTo({
					url: "/pages/jiajiao/booking",
				});
			},

			/**
			 * 导航到服务介绍页面
			 */
			navigateToServices() {
				uni.navigateTo({
					url: "/pages/jiajiao/services",
				});
			},

			/**
			 * 导航到我投递的简历页面
			 */
			navigateToMyDelivery() {
				uni.navigateTo({
					url: "/pages/jiajiao/my-delivery",
				});
			},

			/**
			 * 导航到我发布的家教页面
			 */
			navigateToMyPublish() {
				uni.navigateTo({
					url: "/pages/jiajiao/my-publish",
				});
			},

			/**
			 * 刷新老师列表
			 */
			refreshTeachers() {
				this.teachers = [];
				this.teacherList = [];
				this.getTeachers();
			},

			/**
			 * 刷新需求列表
			 */
			refreshNeeds() {
				this.needs = [];
				this.thisForm.page = 1;
				this.loadend = false;
				this.getList();
			}
		},
	};
</script>

<style lang="scss" scoped>
	@import "@/uni.scss";

	/* 页面容器 */
	.container {
		background: #f9f9f9;
		min-height: 100vh;
		padding-bottom: 120rpx;
		/* 为底部导航留出空间 */
	}

	/* 头部样式 */
	.header {
		background: linear-gradient(135deg, #ff6b35, #e55a2b);
		color: white;
		padding: 30rpx;
		position: sticky;
		top: 0;
		z-index: 100;
		box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
	}

	.header-top {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 30rpx;
	}

	.logo {
		display: flex;
		align-items: center;
	}

	.logo-icon {
		font-size: 36rpx;
		margin-right: 16rpx;
	}

	.logo-text {
		font-size: 30rpx;
		font-weight: bold;
	}

	.user-actions {
		display: flex;
		gap: 30rpx;
	}

	.action-link {
		color: white;
		font-size: 28rpx;
	}

	.search-bar {
		background: white;
		border-radius: 60rpx;
		padding: 16rpx 30rpx;
		display: flex;
		align-items: center;
		gap: 16rpx;
	}

	.search-icon {
		font-size: 28rpx;
		color: #95a5a6;
	}

	.search-placeholder {
		color: #95a5a6;
		font-size: 28rpx;
		flex: 1;
	}

	/* 主导航 */
	.main-nav {
		background: white;
		padding: 20rpx 0;
		border-bottom: 1rpx solid #eee;
	}

	.nav-scroll {
		white-space: nowrap;
		padding: 0 30rpx;
	}

	.nav-item {
		display: inline-block;
		padding: 16rpx 30rpx;
		margin-right: 20rpx;
		border-radius: 40rpx;
		background: #f5f5f5;
		font-size: 28rpx;
		color: #34495e;
		transition: all 0.3s ease;

		&.active {
			background: #ff6b35;
			color: white;
		}
	}

	/* 主横幅区域 */
	.hero-section {
		position: relative;
		// background: linear-gradient(135deg, #3498db 0%, #2980b9 100%);
		background: #ff6b35;
		overflow: hidden;
		min-height: 500rpx;
		margin-bottom: 32rpx;
	}

	.hero-background {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		opacity: 0.1;
	}

	.hero-bg-image {
		width: 100%;
		height: 100%;
	}

	.hero-content {
		position: relative;
		z-index: 10;
		padding: 60rpx 30rpx 80rpx;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
	}

	.hero-title {
		display: block;
		font-size: 48rpx;
		font-weight: bold;
		color: white;
		line-height: 1.2;
		margin-bottom: 8rpx;
		text-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.3);
	}

	.hero-description {
		display: block;
		font-size: 28rpx;
		color: rgba(255, 255, 255, 0.9);
		line-height: 1.5;
		margin: 20rpx 0 40rpx;
		max-width: 500rpx;
	}

	.hero-buttons {
		display: flex;
		flex-direction: column;
		gap: 20rpx;
		width: 100%;
	}

	.hero-btn {
		padding: 24rpx 48rpx;
		border-radius: 50rpx;
		text-align: center;
		transition: all 0.3s ease;

		&:active {
			transform: scale(0.95);
		}
	}

	.primary-btn {
		background: #2ecc71;
		box-shadow: 0 4rpx 16rpx rgba(46, 204, 113, 0.3);
	}

	.secondary-btn {
		background: rgba(255, 255, 255, 0.2);
		backdrop-filter: blur(10rpx);
		border: 1rpx solid rgba(255, 255, 255, 0.3);
	}

	.btn-text {
		font-size: 28rpx;
		font-weight: 500;
		color: white;
	}

	.wave-decoration {
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		height: 40rpx;
		overflow: hidden;
	}

	.wave-path {
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		height: 40rpx;
		background: #f5f7fa;
		border-radius: 50% 50% 0 0 / 100% 100% 0 0;
		transform: scaleX(1.2);
	}

	.wave-svg-container {
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		height: 40rpx;
		overflow: hidden;
	}

	.wave-svg {
		width: 100%;
		height: 100%;
	}

	.wave-svg svg {
		width: 100%;
		height: 100%;
		display: block;
	}

	/* 内容区域 */
	.content {
		padding: 30rpx;
	}

	.section-title {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 30rpx;
	}

	.title-with-accent {
		display: flex;
		align-items: center;
		gap: 16rpx;
	}

	.title-accent {
		width: 8rpx;
		height: 32rpx;
		background: linear-gradient(135deg, #ff6b35 0%, #e55a2b 100%);
		border-radius: 4rpx;
	}

	.title-text {
		font-size: 36rpx;
		font-weight: bold;
		color: #333;
	}

	.more-link {
		display: flex;
		align-items: center;
		gap: 8rpx;
		padding: 8rpx 2rpx;
		// border-radius: 20rpx;
		// background: rgba(52, 152, 219, 0.1);
		// transition: all 0.3s ease;

		// &:active {
		//   background: rgba(52, 152, 219, 0.2);
		//   transform: scale(0.95);
		// }
	}

	.more-text {
		font-size: 26rpx;
		color: #ff6b35;
		font-weight: 500;
	}

	.arrow-icon {
		font-size: 24rpx;
		color: #ff6b35;
		font-weight: bold;
		transition: transform 0.3s ease;
		display: inline-block;
	}

	.more-link:active .arrow-icon {
		transform: translateX(4rpx);
	}

	/* 主要功能卡片 */
	.action-cards {
		display: flex;
		flex-direction: row;
		gap: 24rpx;
		margin-bottom: 40rpx;
	}

	.action-card {
		position: relative;
		border-radius: 24rpx;
		overflow: hidden;
		box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.1);
		//   transition: all 0.3s ease;
		flex: 1;

		//   &:active {
		//     transform: scale(0.98);
		//   }
	}

	.find-tutor-card {
		background: linear-gradient(135deg, #ff6b35 0%, #e55a2b 100%);
	}

	.be-tutor-card {
		background: linear-gradient(135deg, #2ecc71 0%, #27ae60 100%);
	}

	.card-content {
		position: relative;
		z-index: 2;
		padding: 32rpx 24rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		text-align: center;
		gap: 16rpx;
	}

	.card-icon {
		width: 60rpx;
		height: 60rpx;
		border-radius: 50%;
		background: rgba(255, 255, 255, 0.2);
		display: flex;
		align-items: center;
		justify-content: center;
		backdrop-filter: blur(10rpx);
	}

	.icon-emoji {
		font-size: 32rpx;
	}

	.card-info {
		color: white;
	}

	.card-title {
		display: block;
		font-size: 28rpx;
		font-weight: bold;
		margin-bottom: 6rpx;
	}

	.card-subtitle {
		display: block;
		font-size: 22rpx;
		opacity: 0.9;
		line-height: 1.3;
	}

	/* 移除箭头样式，因为已注释掉 */

	.card-decoration {
		position: absolute;
		top: 0;
		right: 0;
		width: 120rpx;
		height: 120rpx;
		pointer-events: none;
	}

	.decoration-circle {
		position: absolute;
		border-radius: 50%;
		background: rgba(255, 255, 255, 0.1);
	}

	.circle-1 {
		width: 80rpx;
		height: 80rpx;
		top: -40rpx;
		right: -40rpx;
	}

	.circle-2 {
		width: 50rpx;
		height: 50rpx;
		top: 10rpx;
		right: 10rpx;
		background: rgba(255, 255, 255, 0.05);
	}

	/* 轮播图 */
	.banner {
		border-radius: 24rpx;
		overflow: hidden;
		margin-bottom: 40rpx;
		height: 320rpx;
		position: relative;
	}

	.banner-img {
		width: 100%;
		height: 100%;
		background-color: #e3f2fd;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #ff6b35;
		font-weight: bold;
	}

	.banner-text {
		font-size: 32rpx;
		color: #ff6b35;
	}

	/* 服务分类 */
	.category-grid {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		grid-template-rows: repeat(3, 1fr);
		gap: 12rpx;
		margin-bottom: 50rpx;
	}

	.category-item {
		text-align: center;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 20rpx;
		border-radius: 16rpx;
		transition: all 0.3s ease;
	}

	.category-item:active {
		transform: scale(0.95);
	}

	.category-icon {
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
		// background: rgba(255, 255, 255, 0.8);
		display: flex;
		align-items: center;
		justify-content: center;
		margin-bottom: 12rpx;
		// box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
	}

	.category-emoji {
		font-size: 48rpx;
	}

	.category-name {
		font-size: 26rpx;
		color: #333;
		font-weight: 600;
		text-align: center;
	}

	/* 教员列表 */
	.teacher-list {
		white-space: nowrap;
		padding: 10rpx 0 40rpx;
	}

	.teacher-card {
		display: inline-block;
		width: 440rpx;
		background: white;
		border-radius: 24rpx;
		overflow: hidden;
		box-shadow: 0 6rpx 20rpx rgba(0, 0, 0, 0.08);
		margin-right: 30rpx;
		vertical-align: top;
	}

	.teacher-img {
		height: 240rpx;
		background-color: #bbdefb;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #ff6b35;

		.img-box {
			width: 100%;
			height: 100%;
			border-radius: 24rpx;
		}
	}

	.teacher-placeholder {
		font-size: 28rpx;
		color: #ff6b35;
	}

	.teacher-info {
		padding: 24rpx;
	}

	.teacher-name {
		font-weight: bold;
		font-size: 32rpx;
		margin-bottom: 10rpx;
		color: #333;
	}

	.teacher-subject {
		color: #ff6b35;
		font-size: 28rpx;
		margin-bottom: 10rpx;
		margin-left: 12rpx;
	}

	.teacher-desc {
		font-size: 24rpx;
		color: #95a5a6;
		display: block;
		//   line-height: 1.4;
		//   display: -webkit-box;
		//   -webkit-line-clamp: 2;
		//   -webkit-box-orient: vertical;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		width: 100%;
	}

	/* 热门需求 */
	.needs-list {
		background: white;
		border-radius: 24rpx;
		overflow: hidden;
		box-shadow: 0 6rpx 20rpx rgba(0, 0, 0, 0.08);
		margin-bottom: 50rpx;
	}

	.need-item {
		padding: 30rpx;
		border-bottom: 1rpx solid #eee;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.need-item:last-child {
		border-bottom: none;
	}

	.need-info {
		flex: 1;
		display: flex;
		flex-direction: column;
		width: 0;
	}

	.need-subject {
		font-weight: 500;
		font-size: 32rpx;
		margin-bottom: 10rpx;
		color: #333;
	}

	.need-desc {
		font-size: 28rpx;
		color: #95a5a6;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		width: 100%;
	}

	.need-price {
		color: #ff0000;
		font-weight: bold;
		font-size: 32rpx;
		margin-left: 20rpx;
	}

	/* 底部导航 */
	.bottom-nav {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background: white;
		display: flex;
		justify-content: space-around;
		padding: 20rpx 0;
		border-top: 1rpx solid #eee;
		z-index: 100;
	}

	.nav-tab {
		text-align: center;
		color: #95a5a6;
		font-size: 24rpx;
		display: flex;
		flex-direction: column;
		align-items: center;

		&.active {
			color: #ff6b35;
		}
	}

	.tab-icon {
		font-size: 48rpx;
		margin-bottom: 6rpx;
	}

	.tab-text {
		font-size: 24rpx;
	}

	/* 动画效果 */
	.category-item,
	.teacher-card,
	.need-item {
		transition: transform 0.2s ease;
	}

	.category-item:active,
	.teacher-card:active,
	.need-item:active {
		transform: scale(0.95);
	}

	.nav-item {
		transition: all 0.3s ease;
	}

	.nav-tab {
		transition: color 0.3s ease;
	}

	.find-tutor-card {
		animation-delay: 0.1s;
	}

	.be-tutor-card {
		animation-delay: 0.2s;
	}

	.icon-jiantouyou {
		color: #ff6b35;
	}

	/* 快捷入口卡片 - 精致设计 */
	.quick-access-section {
		position: absolute;
		bottom: 42rpx;
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		gap: 16rpx;
		z-index: 20;
		// width: calc(100% - 60rpx);
		// max-width: 680rpx;
	}

	.quick-card {
		position: relative;
		height: 100rpx;
		border-radius: 24rpx;
		overflow: hidden;
		box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.15);
		transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);

		&:active {
			transform: translateY(-4rpx) scale(0.98);
			box-shadow: 0 12rpx 32rpx rgba(0, 0, 0, 0.2);
		}
	}

	/* 卡片背景渐变 */
	.delivery-card {
		background: linear-gradient(120deg, rgba(255, 107, 53, 0.95) 0%, rgba(255, 140, 80, 0.95) 50%, rgba(255, 107, 53, 0.95) 100%);
		background-size: 200% 100%;
		animation: gradient-shift 3s ease infinite;
	}

	.publish-card {
		background: linear-gradient(120deg, rgba(46, 204, 113, 0.95) 0%, rgba(72, 219, 134, 0.95) 50%, rgba(46, 204, 113, 0.95) 100%);
		background-size: 200% 100%;
		animation: gradient-shift 3s ease infinite;
	}

	@keyframes gradient-shift {

		0%,
		100% {
			background-position: 0% 50%;
		}

		50% {
			background-position: 100% 50%;
		}
	}

	/* 背景装饰层 */
	.card-bg-layer {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		overflow: hidden;
		pointer-events: none;
	}

	.bg-circle {
		position: absolute;
		border-radius: 50%;
		background: rgba(255, 255, 255, 0.1);
		animation: float-circle 4s ease-in-out infinite;
	}

	.circle-1 {
		width: 120rpx;
		height: 120rpx;
		top: -40rpx;
		right: -20rpx;
		animation-delay: 0s;
	}

	.circle-2 {
		width: 80rpx;
		height: 80rpx;
		bottom: -30rpx;
		left: 20rpx;
		animation-delay: 1s;
	}

	.bg-pattern {
		position: absolute;
		top: 0;
		right: 0;
		width: 150rpx;
		height: 100%;
		background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.05) 50%, transparent 100%);
		transform: skewX(-20deg);
	}

	@keyframes float-circle {

		0%,
		100% {
			transform: translateY(0) scale(1);
			opacity: 0.1;
		}

		50% {
			transform: translateY(-15rpx) scale(1.05);
			opacity: 0.15;
		}
	}

	/* 卡片主内容 */
	.card-main {
		position: relative;
		z-index: 2;
		display: flex;
		align-items: center;
		height: 100%;
		padding: 0 24rpx;
		gap: 16rpx;
	}

	/* 图标区域 */
	.card-left {
		flex-shrink: 0;
	}

	.icon-box {
		position: relative;
		width: 60rpx;
		height: 60rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.main-icon {
		font-size: 32rpx;
		position: relative;
		z-index: 2;
		filter: drop-shadow(0 2rpx 4rpx rgba(0, 0, 0, 0.2));
	}

	.icon-glow {
		position: absolute;
		width: 60rpx;
		height: 60rpx;
		border-radius: 50%;
		background: rgba(255, 255, 255, 0.25);
		filter: blur(8rpx);
		animation: pulse-glow 2s ease-in-out infinite;
	}

	@keyframes pulse-glow {

		0%,
		100% {
			transform: scale(1);
			opacity: 0.25;
		}

		50% {
			transform: scale(1.2);
			opacity: 0.4;
		}
	}

	/* 文字内容区域 */
	.card-right {
		flex: 1;
		display: flex;
		flex-direction: column;
		gap: 4rpx;
	}

	.card-title {
		font-size: 28rpx;
		font-weight: 700;
		color: white;
		line-height: 1.2;
		text-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.15);
		letter-spacing: 0.5rpx;
	}

	.card-desc {
		font-size: 22rpx;
		color: rgba(255, 255, 255, 0.9);
		line-height: 1.3;
		font-weight: 400;
	}

	/* 箭头区域 */
	.card-arrow-box {
		flex-shrink: 0;
		width: 40rpx;
		height: 40rpx;
		border-radius: 50%;
		background: rgba(255, 255, 255, 0.2);
		display: flex;
		align-items: center;
		justify-content: center;
		backdrop-filter: blur(10rpx);
		transition: all 0.3s ease;
	}

	.quick-card:active .card-arrow-box {
		background: rgba(255, 255, 255, 0.35);
		transform: translateX(6rpx);
	}

	.arrow-icon {
		font-size: 32rpx;
		color: white;
		font-weight: 300;
		line-height: 1;
	}

	@keyframes slideInUp {
		from {
			opacity: 0;
			transform: translateY(60rpx);
		}

		to {
			opacity: 1;
			transform: translateY(0);
		}
	}

	@keyframes float {

		0%,
		100% {
			transform: translateY(0) rotate(0deg);
		}

		50% {
			transform: translateY(-20rpx) rotate(180deg);
		}
	}
</style>